<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!-- 查询 -->
        <el-form ref="orderData" :model="orderData" size="small" :inline="true" label-width="68px">
          <el-form-item label="订单状态">
            <el-select v-model="orderData.orderStatus" placeholder="请选择订单状态">
              <el-option v-for="item in orderType" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="--"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
              @change="changeTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 报表分析 -->
        <el-form class="financialStatis" ref="financialStatis" :model="financialStatis" size="small" :inline="true">
          <download-excel class="export-excel-wrapper" :fetch="createExportData" header="订单数据统计" :data="dataList">
            <el-button type="warning" size="mini" plain icon="el-icon-download"> 导出 </el-button>
          </download-excel>
          <div>
            <el-form-item label="订单数量" style="margin-right:30px">
              <el-tag size="medium" type="success">{{financialStatis.orderNum}} /条</el-tag>
            </el-form-item>
            <el-form-item label="实际总收入" style="margin-right:30px">
              <el-tag size="medium" type="danger">{{financialStatis.orderPrice}} /元</el-tag>
            </el-form-item>
            <el-form-item label="支付金额" style="margin-right:30px">
              <el-tag size="medium" type="warning">{{financialStatis.orderSucc}} /元</el-tag>
            </el-form-item>
            <el-form-item label="退款金额" style="margin-right:30px">
              <el-tag size="medium" type="danger">{{financialStatis.orderRefund}} /元</el-tag>
            </el-form-item>
          </div>
        </el-form>
        <!-- 财务列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="capsuleInfoTitle" label="项目" align="center">
          </el-table-column>
          <el-table-column prop="roomName" label="房间" align="center" width="110">
          </el-table-column>
          <el-table-column prop="capsuleSpecsName" label="房间规格" align="center" width="100">
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" align="center">
          </el-table-column>
          <el-table-column prop="otherPayOrderNo" label="三方支付订单号" align="center">
          </el-table-column>
          <el-table-column prop="payRealPrice" label="支付金额" align="center" width="90">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.payRealPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="checkInTime" label="入住时间" align="center">
          </el-table-column>
          <el-table-column prop="checkInTime" label="退房时间" align="center">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" align="center" width="90">
            <template slot-scope="scope">
              <div class="roomStatus"
                :style="{color:scope.row.orderStatus == 0 ? '#5ac725' : (scope.row.orderStatus == 1 ? '#f56c6c' : (scope.row.orderStatus == '2' ? '#909399' : (scope.row.orderStatus == '3' ? '#909399' :'')))}">
                {{scope.row.orderStatus == 0 ? '下单' : (scope.row.orderStatus == 1 ? '已支付' : (scope.row.orderStatus == '2' ? '已退款' : (scope.row.orderStatus == '3' ? '已取消' :'')))}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="refundPrice" label="退款金额" align="center" width="90">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.refundPrice || 0}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="refundTime" label="退款时间" align="center">
          </el-table-column>
          <el-table-column prop="refundReason" label="退款理由" align="center">
          </el-table-column>
          <el-table-column prop="roomChangeStatus" label="是否改价单" align="center" width="90">
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="fromData.pageNum" :page-size="fromData.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getFinanceList,
    getFinanceListstatiStics,
    getDerivedStatistics
  } from "@/api/financial/financial"
  export default {
    data() {
      return {
        loading: true,
        tableData: [],
        total: 0,
        orderData: {},
        orderStatus: '',
        orderType: [{
            value: 0,
            label: '下单'
          },
          {
            value: 1,
            label: '已支付'
          },
          {
            value: 2,
            label: '已退款'
          },
          {
            value: 3,
            label: '已取消'
          },
          {
            value: 99,
            label: '全部'
          }
        ],
        tiemValue: '',
        fromData: {
          capsuleInfoId: '',
          createBeginTime: '',
          createEndTime: '',
          orderStatus: 99,
          pageNum: 1,
          pageSize: 10
        },
        financialStatis: {
          orderNum: '',
          orderPrice: '',
          orderSucc: '',
          orderRefund: ''
        },
        flag: false,
        dataList: []
      }
    },
    created() {
      this.getFinanceList()
    },
    methods: {
      getFinanceList() {
        this.loading = true
        let capsuleInfoId = this.$store.state.user.capsuleInfoId
        this.fromData.capsuleInfoId = capsuleInfoId != '' ? capsuleInfoId : ''
        getFinanceList(this.fromData).then(res => {
          // console.log('finace-->' , res)
          if (res.code == 200) {
            let data = res.data
            this.tableData = data.rows
            this.total = data.total
            this.getFinanceListstatiStics()
            this.loading = false
            if (this.flag) {
              if (this.tableData.length > 0) {
                this.getExcelOrder()
              } else {
                this.$message({
                  message: '暂无数据！',
                  type: 'warning'
                })
              }
            }
          }
        })
      },
      getFinanceListstatiStics() {
        getFinanceListstatiStics(this.fromData).then(res => {
          if (res.code == 200) {
            let data = res.data
            this.financialStatis = {
              orderNum: data.cntA,
              orderPrice: data.sumA,
              orderSucc: data.sumB,
              orderRefund: data.sumC
            }
          }
        })
      },
      handleSizeChange(val) {
        this.fromData.pageNum = val
        this.getFinanceList()
      },
      handleCurrentChange(val) {
        this.fromData.pageNum = val
        this.getFinanceList()
      },
      // 导出
      createExportData() {
        this.flag = true
        this.getFinanceList()
      },
      async getExcelOrder() {
        let parmas = {
          beginTime: this.fromData.createBeginTime,
          capsuleInfoId: this.$store.state.user.capsuleInfoId || '',
          endTime: this.fromData.createEndTime,
          orderStatus: this.fromData.orderStatus
        }
        let data = await getDerivedStatistics(parmas)
        const fileReader = new FileReader()
        fileReader.readAsDataURL(data)
        fileReader.onload = (event) => {
          let a = document.createElement('a')
          a.download = `财务订单数据报表_${new Date().getTime()}.xlsx`
          a.href = event.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      },
      changeTime(e) {
        this.fromData.createBeginTime = this.tiemValue[0]
        this.fromData.createEndTime = this.tiemValue[1]
      },
      onSubmitsear() {
        if (this.orderData.orderStatus) {
          this.fromData.orderStatus = this.orderData.orderStatus
        } else {
          this.fromData.orderStatus = 99
        }
        this.getFinanceList()
      },
      resetQuery() {
        this.fromData = {
          capsuleInfoId: this.$store.state.user.capsuleInfoId != '' ? this.$store.state.user.capsuleInfoId : '',
          createBeginTime: '',
          createEndTime: '',
          orderStatus: 99,
          pageNum: 1,
          pageSize: 10
        }
        this.tiemValue = ''
        this.orderData.orderStatus = ''
        this.flag = false
        this.getFinanceList()
      }
    }
  }
</script>

<style lang="scss">
  .financialStatis {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
